@import '~@hi-ui/core-css/lib/index.scss';

$prefix:  '#{$component-prefix}-number-input' !default;

.#{$prefix} {
  $this: &;

  $minus-class: '#{$prefix}__minus';
  $plus-class: '#{$prefix}__plus';
  $input-class: '#{$prefix}__input';

  $input-shadow: 0 0 0 2px use-color-mode('primary', 100);
  $input-error-shadow: 0 0 0 2px use-color-mode('danger', 100);

  position: relative;
  display: inline-flex;
  width: 100%;
  color: use-color('gray', 700);
  font-size: use-text-size('normal');
  z-index: use-zindex('normal');
  box-sizing: border-box;
  border-radius: use-border-radius('normal');
  background-color: use-color-static('white');

  // @animation
  transition-property: border, background-color;
  transition-duration: use-motion-duration('fast');
  transition-timing-function: use-motion-bezier('normal');

  &__minus,
  &__plus {
    @include button-reset();

    user-select: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    padding: 0 use-spacing(3);
    font-size: use-text-size('md');
    color: use-color('gray', 500);

    // @animation
    transition-property: background-color, color, box-shadow;
    transition-duration: use-motion-duration('normal');
    transition-timing-function: use-motion-bezier('normal');

    &:hover {
      color: use-color-mode('primary');
    }

    &.disabled {
      cursor: not-allowed;
      color: use-color('gray', 400);
    }
  }

  &__input {
    @include input-reset();

    flex: 1;
    width: 100%;
    height: 100%;
    color: inherit;
    text-align: left;
    padding: 0 use-spacing(6);

    &::placeholder {
      color: use-color('gray', 400);
    }
  }

  &__prefix {
    display: inline-flex;
    margin-left: use-spacing(6);
    align-items: center;
    flex-shrink: 0;
    color: use-color('gray', 700);
    font-size: inherit;
    text-align: center;
  }

  &__suffix {
    box-sizing: border-box;
    height: 100%;

    @include flex(center, center, column, inline-flex);
  }

  &#{$this}--disabled {
    cursor: not-allowed;

    .#{$input-class} {
      cursor: not-allowed;
    }
  }

  &:not(#{$this}--disabled)#{$this}--invalid {
    border-color: use-color-mode('danger');
  }

  &:not(#{$this}--disabled):hover {
    border-color: use-color-mode('primary');

    &#{$this}--invalid,
    &#{$this}--out-of-bounds {
      border-color: use-color-mode('danger');
    }
  }

  &#{$this}--focused {
    border-color: use-color-mode('primary');
    box-shadow: $input-shadow;

    &#{$this}--invalid,
    &#{$this}--out-of-bounds {
      border-color: use-color-mode('danger');
      box-shadow: $input-error-shadow;
    }
  }

  &--appearance {
    &-line {
      border: use-border-size('normal') use-color('gray', 300);

      &#{$this}--disabled {
        color: use-color('gray', 400);
        background-color: use-color('gray', 50);
      }
    }

    &-filled {
      border: use-border-size('normal') use-color('gray', 100);
      background-color: use-color('gray', 100);

      &:not(#{$this}--disabled):hover {
        background-color: use-color-static('white');
      }

      &#{$this}--focused {
        background-color: use-color-static('white');
      }

      &#{$this}--disabled {
        color: use-color('gray', 400);
        background-color: use-color('gray', 200);
      }
    }
  }

  &--size {
    &-sm {
      height: use-height-size(6);

      .#{$minus-class},
      .#{$plus-class} {
        font-size: use-text-size('sm');
      }
    }

    &-md {
      height: use-height-size(8);

      .#{$minus-class} {
        font-size: use-text-size('md');
      }
    }

    &-lg {
      height: use-height-size(10);

      .#{$minus-class},
      .#{$plus-class} {
        font-size: use-text-size('lg');
      }
    }
  }
}
